<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Wrappinglayout">
    <lztier>Utility Component</lztier>
    <lzcategory>layout</lzcategory>
    <lzshortdesc>
        A layout for arranging siblings in multiple lines.
    </lzshortdesc>
    <lztag>utils/layouts/wrappinglayout.xml</lztag>
</lzelement>

<p><classname>wrappinglayout</classname> extends
<classname>LzLayout</classname>, and is therefore responsible for
arranging all of the subviews for the view that it is attached to.
<classname>wrappinglayout</classname> affects the position of its
sibling views, in rows or columns depending on the
<attribute>axis</attribute> specified.</p>

<p><classname>wrappinglayout</classname> places the first subview at
the top-left corner, then the next view will be placed to the right
(if <code>axis="x"</code>) or below (if <code>axis="y"</code>).  The
layout continues placing views along the axis until a view overlaps
the width or height of the containing view, then the layout will begin
placing views at the next row or column.</p>

<example title="wrapping layout to position identical views">
&lt;canvas height="100"&gt;
  &lt;view width="200" bgcolor="silver"&gt;
    &lt;wrappinglayout axis="x" spacing="10"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
  &lt;/view&gt;
&lt;/canvas&gt;
</example>

<p>The following example shows how the layout of views is dynamically
recalculated when the size of the container view changes. The
contained views have been given different shapes and colors to make it
easier for you to follow how they're rearranged.</p>

<example title="Using wrappinglayout with &lt;resizestate&gt;">
&lt;canvas height="100"&gt;
  &lt;view width="200" bgcolor="silver" onmousedown="rs.apply()" onmouseup="rs.remove()"&gt;
    &lt;resizestate name="rs"/&gt;
    &lt;wrappinglayout axis="x" spacing="10"/&gt;
    &lt;view bgcolor="blue" height="30" width="50"/&gt;
    &lt;view bgcolor="red" height="10" width="50"/&gt;
    &lt;view bgcolor="green" height="40" width="50"/&gt;
    &lt;view bgcolor="yellow" height="20" width="50"/&gt;
    &lt;view bgcolor="teal" height="30" width="50"/&gt;
  &lt;/view&gt;
  &lt;text y="${canvas.height-this.height}"&gt;
    Resize the gray view with your mouse to see dynamic layout.
  &lt;/text&gt;
&lt;/canvas&gt;
</example>
<!--
<img src="images/wrappinglayout/wrappinglayout_image1.jpg" width="170" height="29" />
 
<example class="program">
Note: this example does not generate the image that follows it.
&lt;canvas height="100"&gt;
  &lt;view &gt;
    &lt;view bgcolor="blue" height="30" width="50" /&gt;
    &lt;view bgcolor="blue" height="30" width="50" /&gt;
    &lt;view bgcolor="blue" height="30" width="50" /&gt;
    &lt;simplelayout axis="x" spacing="0"/&gt;
    &lt;simplelayout axis="y" spacing="0"/&gt;
  &lt;/view &gt;
&lt;/canvas&gt;
</example>
 
<img src="images/wrappinglayout/wrappinglayout_image2.jpg" width="150" height="90" />

 -->

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
